<template>
  <div class="whereareu flex flex-col h-full">
    <el-page-header content="目录结构" @back="$emit('close')">
      <div slot="title">关闭</div>
    </el-page-header>
    <div class="flex-1 overflow-auto">
      <el-tree :data="[store]" default-expand-all :props="defaultProps">
        <!-- @mouseover="mouseoverHandler(data)"
        @mouseleave="mouseleaveHandler" -->
        <div
          class="flex w-full pr-4"
          slot-scope="{ node, data }"
          style="display: flex; width: 100%"
        >
          <div class="flex-1">{{ node.label }}</div>
          &nbsp; &nbsp; &nbsp;
          <el-tag
            class="ml-4 mr-4"
            v-if="data.typeTag"
            size="mini"
            :type="data.typeTag"
            >{{ data.type }}</el-tag
          >
          <i
            @click.stop="showDialogHandler(data)"
            class="el-icon-edit-outline"
            v-if="data.file"
          ></i>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { traverse } from "./utils/format";
import { createPromiseDialog } from "../components/PromiseDialog/index";
import { showMask, removeMask } from "./hooks/createMask";

import Editer from "./views/editer.vue";

import { getFileRaw } from "./apis/file";
export default {
  props: ["app"],
  components: { Editer },
  data() {
    return {
      data: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      store: [],
      // git-sha
      sha: "",
    };
  },
  mounted() {
    // 树形初始化
    this.traverse(this.$props.app, this.data);
    this.store = this.data?.children?.[0];
    console.log(this.store, "store");
  },
  methods: {
    PromiseDialog: createPromiseDialog,
    traverse,
    showMask,
    removeMask,
    getFileRaw,
    // 展示
    async showDialogHandler(record) {
      try {
        const { data } = await getFileRaw(record.file, "auto");
        this.sha = data.sha;
        // console.log(data.content, "内容");
        const createCodeWindow = this.PromiseDialog(Editer, {
          value: data.content,
          path: record.file,
          sha: data.sha || "",
        });
        createCodeWindow();
      } catch (error) {
        console.error(error, "错误");
        console.error("请求出错");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.whereareu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  background-color: #fff;
  height: 100vh;
  overflow: scroll;
}
</style>
